<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom?safebottom+120:150}rpx;`">
		<fui-form labelColor="#7a7a7a" ref="form" top="0" :model="formData" :show="false">
			<fui-form-item labelWidth="500rpx" asterisk :label="rules_txt[formData.rules_type]" arrow prop="rules_id">
				<fui-input readonly @click="showRules=true" :borderBottom="false" :padding="[0]" :value="formData.rules_txt"></fui-input>
			</fui-form-item>
			<fui-form-item label="车辆信息" prop="plates" asterisk :bottomBorder="formData.plates.length>0?false:true">
				<view class="plus">
					<fui-button width="110rpx" height="50rpx" @click="addplates">
						<fui-icon name="plus" color="#fff" size="30"></fui-icon>
						<text style="font-size: 28rpx;">添加</text>
					</fui-button>
				</view>
			</fui-form-item>
			<block v-if="formData.plates_count<=10">
			<view class="plates" v-if="formData.plates.length>0">
				<view class="line" v-for="(item,index) in formData.plates" :key="index">
					<fui-text :text="item.plate_number" color="black" :size="28"></fui-text>
					<fui-text :text="plate_type[item.plate_type]" color="black" :size="28"></fui-text>
					<fui-text :text="car_models[item.car_models]" color="black" :size="28"></fui-text>
					<fui-text @click="deletePlates(index)" text="删除" color="red" :size="28" decoration="underline"></fui-text>
				</view>
			</view>
			</block>
			<fui-form-item label="车主姓名" asterisk prop="contact">
				<fui-input placeholder="请输入车主姓名" :borderBottom="false" :padding="[0]" v-model="formData.contact"></fui-input>
			</fui-form-item>
			<fui-form-item label="手机号" asterisk prop="mobile">
				<fui-input placeholder="请输入手机号" :borderBottom="false" :padding="[0]" v-model="formData.mobile"></fui-input>
			</fui-form-item>
			<fui-form-item label="绑定微信" arrow prop="rules_id">
				<fui-input readonly @click="$navigateTo('parking/wechat')" :borderBottom="false" :padding="[0]" :value="formData.third_txt"></fui-input>
				<text style="color: #ddd;position: absolute;right: 80rpx;top: 0rpx;" v-if="!formData.third_id">未绑定</text>
			</fui-form-item>
			<fui-form-item label="开始时间" arrow asterisk prop="starttime">
				<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请选择开始时间" v-model="formData.starttime" @click="showTime('starttime')"></fui-input>
			</fui-form-item>
			<fui-form-item label="结束时间" arrow asterisk prop="endtime">
				<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请选择结束时间" v-model="formData.endtime" @click="showTime('endtime')"></fui-input>
			</fui-form-item>
			<fui-form-item label="占用车位" prop="occupat_number" v-if="formData.plates_count>1 || formData.plates.length>1">
				<fui-input placeholder="请输入占用车位" type="digit" :borderBottom="false" :padding="[0]" v-model="formData.occupat_number">
					<text style="font-size: 24rpx;border-radius: 4rpx;background-color: #8b8b8b;color: #fff;padding: 4rpx 8rpx;">个</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="首充金额" prop="pay" v-if="!formData.id">
				<fui-input placeholder="请输入首充金额" type="digit" :borderBottom="false" :padding="[0]" v-model="formData.pay">
					<text style="font-size: 24rpx;border-radius: 4rpx;background-color: #8b8b8b;color: #fff;padding: 4rpx 8rpx;">元</text>
				</fui-input>
			</fui-form-item>
			<block v-if="formData.remark_line">
				<block v-for="(line,i) in formData.remark_line" :key="i">
					<fui-form-item v-if="line.type=='txt'" :label="line.remark">
						<fui-input :borderBottom="false" :padding="[0]" :placeholder="'请输入'+line.remark" v-model="line.value"></fui-input>
					</fui-form-item>
					<fui-form-item v-if="line.type=='image'" :label="line.remark" :padding="['0rpx', '32rpx']">
						<fui-upload immediate :fileList="line.value?[line.value]:[]" :param="i" @success="applySuccess" :url="baseUrl+'common/upload'" :header="{'x-requested-with':'XMLHttpRequest','token':token}" style="margin-left: 40rpx;position: relative;top: -14rpx;" :sizeType="['compressed']" max="1" width="120" height="120"></fui-upload>
					</fui-form-item>
				</block>
			</block>
			<fui-form-item label="备注" prop="remark">
				<fui-textarea :padding="[0]" v-model="formData.remark" :borderTop="false" :borderBottom="false" placeholder="请输入备注"></fui-textarea>
			</fui-form-item>
			<fui-form-item label="状态" prop="status">
				<fui-radio-group name="radio" v-model="formData.status">
					<view class="fui-list__item">
						<fui-label>
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="normal" checked></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">正常</text>
							</view>
						</fui-label>
						<fui-label :margin="['0','0','0','40rpx']">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="hidden"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">禁用</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
		</fui-form>
		<view class="fui-btn__box" :style="`bottom: ${safebottom || 30}rpx;`">
			<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
		</view>
		<fui-modal width="600" v-if="showAddPlates" :show="showAddPlates" @click="clickButton">
			<fui-form error-position="1" labelColor="#7a7a7a" top="0" :model="plates">
				<fui-form-item label="车牌号" arrow prop="plate_number">
					<fui-input readonly @click="$navigateTo('parking/plate?type=input&plate_number='+plates.plate_number)" :borderBottom="false" :padding="[0]" placeholder="请输入车牌号" v-model="plates.plate_number"></fui-input>
				</fui-form-item>
				<fui-form-item label="车牌颜色" arrow prop="plate_type">
					<fui-input readonly @click="showPlateType=true" :borderBottom="false" :padding="[0]" :value="plate_type[plates.plate_type]"></fui-input>
				</fui-form-item>
				<fui-form-item label="车辆类型" arrow prop="car_models">
					<fui-input readonly @click="showCarModels=true" :borderBottom="false" :padding="[0]" :value="car_models[plates.car_models]"></fui-input>
				</fui-form-item>
			</fui-form>
		</fui-modal>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="rules" :show="showRules" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="parseColumns(car_models)" v-if="showCarModels" :show="showCarModels" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="parseColumns(plate_type)" v-if="showPlateType" :show="showPlateType" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<fui-date-picker :show="checkTime.show" type="3" :value="checkTime.value"  @change="changeTime" @cancel="cancelTime"></fui-date-picker>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDate} from '@/utils/util.js'
	import platetype from '@/components/common/platetype.vue';
	export default {
		components:{
			platetype:platetype,
		},
		data() {
			return {
				baseUrl:baseUrl,
				safebottom:0,
				token:'',
				rules:[],
				car_models:[],
				plate_type:[],
				rules_txt:{
					monthly:'选择月卡',
					day:'选择日卡',
					stored:'选择储值卡',
					member:'选择会员卡',
					vip:'选择VIP卡'
				},
				add_rules_txt:{
					monthly:'添加月卡',
					day:'添加日卡',
					stored:'添加储值卡',
					member:'添加会员卡',
					vip:'添加VIP卡'
				},
				formData:{
					id:'',
					rules_id:'',
					rules_txt:'',
					rules_type:'',
					plates:[],
					contact:'',
					mobile:'',
					third_id:'',
					third_txt:'',
					startime:'',
					endtime:'',
					remark:'',
					remark_line:'',
					pay:'',
					plates_count:1,
					occupat_number:1,
					status:'normal'
				},
				checkTime:{
					show:false,
					key:'',
					value:''
				},
				plates:{
					plate_number:'',
					plate_type:'blue',
					car_models:'car'
				},
				showAddPlates:false,
				showRules:false,
				showPlateType:false,
				showCarModels:false,
				disabledButton:false
			}
		},
		onLoad(e) {
			this.token=uni.getStorageSync('token');
			if(e.cars_id){
				this.getInfo(e.rules_type).then(res=>{
					this.rules=res.rules;
					this.car_models=res.car_models;
					this.plate_type=res.plate_type;
					this.getDetail(e.cars_id);
				});
			}else{
				uni.setNavigationBarTitle({
					title:this.add_rules_txt[e.rules_type]
				});
				this.getInfo(e.rules_type).then(res=>{
					this.rules=res.rules;
					this.car_models=res.car_models;
					this.plate_type=res.plate_type;
					this.formData.rules_type=e.rules_type;
					let date=new Date();
					this.formData.starttime=formatDate(date);
					date.setMonth(date.getMonth()+1);
					this.formData.endtime=formatDate(date);
					this.formData.rules_id=this.rules[0]['id'];
					this.formData.rules_txt=this.rules[0]['title'];
					this.formData.remark_line=this.getRemarkLine(this.formData.rules_id);
				});
			}
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom*2;
			  }
			});
		},
		onShow() {
			let plate_number=uni.getStorageSync('plate_number') || '';
			if(plate_number){
				this.plates.plate_number=plate_number;
				uni.setStorageSync('plate_number','');
			}
			let third=uni.getStorageSync('third') || '';
			if(third){
				this.formData.third_id=third.id;
				this.formData.third_txt=third.openname;
				uni.setStorageSync('third','');
			}
		},
		methods: {
			...methods,
			uploadSuccess:function(e){
				let res=JSON.parse(e.res.data);
				let fullurl=res.data.fullurl;
				this.formData.remark_line[e.param].value=fullurl;
			},
			applySuccess:function(e){
				let res=JSON.parse(e.res.data);
				let fullurl=res.data.fullurl;
				this.formData.remark_line[e.param].value=fullurl;
			},
			changePicker:function(e){
				if(this.showRules){
					this.formData.rules_id=e.value;
					this.formData.rules_txt=e.text;
					this.showRules=false;
					this.formData.remark_line=this.getRemarkLine(this.formData.rules_id);
				}
				if(this.showPlateType){
					this.plates.plate_type=e.value;
					this.showPlateType=false;
				}
				if(this.showCarModels){
					this.plates.car_models=e.value;
					this.showCarModels=false;
				}
			},
			cancelPicker:function(){
				this.showRules=false;
				this.showPlateType=false;
				this.showCarModels=false;
			},
			parseColumns:function(data){
				let r=[];
				for(let key in data){
					r.push({
						id:key,
						title:data[key]
					});
				}
				return r;
			},
			deletePlates:function(index){
				this.formData.plates.splice(index,1);
			},
			getInfo:function(rules_type){
				return this.$get('parking/cars/info',{rules_type:rules_type},true);
			},
			getDetail:function(cars_id){
				this.$get('parking/cars/detail',{id:cars_id},true).then(res=>{
					let {id,rules_id,rules_type,plates_count,occupat_number,rules,plates,contact,mobile,third,starttime,endtime,remark,remark_line,status}=res.cars;
					plates=plates.map(p=>{
						return {
							plate_number:p.plate_number,
							plate_type:p.plate_type,
							car_models:p.car_models
						};
					});
					if(!remark){
						remark='';
					}
					this.formData={
						id,
						rules_id,
						rules_txt:this.getRulesTxt(res.cars.rules_id),
						rules_type,
						plates,
						contact,
						mobile,
						plates_count,
						occupat_number,
						third_id:third?third.id:'',
						third_txt:third?third.openname:'',
						starttime:formatDate(new Date(starttime*1000)),
						endtime:formatDate(new Date(endtime*1000)),
						remark,
						remark_line:this.getRemarkLine(res.cars.rules_id,res.cars.remark_line),
						pay:0,
						status
					};
				});
			},
			getRulesTxt:function(rules_id){
				let rules=this.rules;
				for(let i=0;i<rules.length;i++){
					if(rules[i].id==rules_id){
						return rules[i].title;
					}
				}
			},
			getRemarkLine:function(rules_id,remark_line=''){
				let rules=this.rules;
				for(let i=0;i<rules.length;i++){
					if(rules[i].id==rules_id){
						let remark_list=rules[i].remark_list;
						if(remark_list){
							for(let j=0;j<remark_list.length;j++){
								let key=remark_list[j].remark;
								remark_list[j].value=remark_line?remark_line[key]:'';
							}
						}
						return remark_list;
					}
				}
			},
			addplates:function(){
				if(this.formData.plates_count && this.formData.plates_count>10){
					this.$navigateTo('parking/cars/plates?cars_id='+this.formData.id);
				}else{
					this.showAddPlates=true;
				}
			},
			showTime:function(e){
				this.checkTime.value=this.formData[e];
				this.checkTime.key=e;
				this.checkTime.show=true;
			},
			cancelTime:function(){
				this.checkTime.value='';
				this.checkTime.key='';
				this.checkTime.show=false;
			},
			changeTime:function(e){
				let key=this.checkTime.key;
				this.formData[key]=e.result;
				this.cancelTime();
			},
			clickButton:function(e){
				if(e.index){
					if(!this.plates.plate_number){
						this.$msg('车牌号不能为空');
						return;
					}
					this.formData.plates.push({
						plate_number:this.plates.plate_number,
						plate_type:this.plates.plate_type,
						car_models:this.plates.car_models
					});
					this.showAddPlates=false;
				}else{
					this.showAddPlates=false;
				}
			},
			submit:function(){
				let rules = [
					{
						name: "contact",
						rule: ["required","isChinese"],
						msg: ["请输入联系人","请输入正确的人名"]
					},
					{
						name: "mobile",
						rule: ["required","isMobile"],
						msg: ["请输入车主手机号","手机号格式正确"]
					}
				];
				this.disabledButton=true;
				this.$refs.form.clearValidate();
				this.$refs.form.validator(this.formData,rules,true).then(res => {
					if (res.isPassed) {
						this.$post('parking/cars/edit',this.formData,true,true).then(res=>{
							uni.setStorageSync('refresh',1);
							this.$navigateBack(1500);
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.plus{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.plates{
	background-color: #fff;
	border-bottom: 1px solid #EEEEEE;
	padding: 30rpx;
	padding-top: 0;
	.line{
		display: flex;
		justify-content: space-between;
		background-color: #afe9f4;
		padding: 20rpx;
	}
}
.fui-list__item{
	display: flex;
	justify-content: space-between;
	width: 50%;
}
.fui-btn__box{
	position: fixed;
	width: 96%;
	left: 2%;
	z-index: 1;
}
</style>